<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数学真题 - 乐考无忧</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <style>
        body {
            background-color: #f0f9f9;
            padding-bottom: 70px;
        }
        .header {
            padding: 15px;
            background: white;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .question-container {
            background: white;
            margin: 15px;
            padding: 20px;
            border-radius: 15px;
            line-height: 1.8;
        }
        .question-text {
            margin-bottom: 20px;
            color: #333;
        }
        .options-container {
            margin-top: 15px;
        }
        .option-item {
            background: #f8f9fa;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .option-item:hover {
            background: #e9ecef;
        }
        .option-item.selected {
            background: #40E0D0;
            color: white;
        }
        .navigation-buttons {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px;
            background: white;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        .question-number {
            color: #666;
            margin-bottom: 10px;
            font-size: 0.9rem;
        }
        .chapter-info {
            color: #40E0D0;
            font-size: 0.9rem;
            margin-bottom: 15px;
        }
        .header .dropdown-toggle {
            padding: 4px 10px;
            font-size: 0.9rem;
        }
        .header .dropdown-menu {
            min-width: 100px;
        }
        .header .dropdown-item.active {
            background-color: #40E0D0;
            color: white;
        }
        .question-image {
            max-width: 100%;
            margin: 15px 0;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
        <a href="math-real.html" class="text-dark"><i class="bi bi-chevron-left fs-4"></i></a>
        <h5 class="mb-0 mx-auto">数学真题</h5>
        <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                2024年
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item active" href="#">2024年</a></li>
                <li><a class="dropdown-item" href="#">2023年</a></li>
                <li><a class="dropdown-item" href="#">2022年</a></li>
                <li><a class="dropdown-item" href="#">2021年</a></li>
                <li><a class="dropdown-item" href="#">2020年</a></li>
            </ul>
        </div>
    </div>

    <!-- 题目内容 -->
    <div class="question-container">
        <div class="question-number">第1题 / 共25题</div>
        <div class="chapter-info">
            <i class="bi bi-bookmark-fill"></i>
            高等数学 - 微积分
        </div>
        <div class="question-text">
            已知函数f(x)=ln(x+√(x²+1))，则f'(x)=?
            <img src="path/to/question-image.jpg" alt="题目图片" class="question-image">
        </div>
        <div class="options-container">
            <div class="option-item">
                A. 1/√(x²+1)
            </div>
            <div class="option-item">
                B. x/√(x²+1)
            </div>
            <div class="option-item">
                C. 1/(x²+1)
            </div>
            <div class="option-item">
                D. x/(x²+1)
            </div>
        </div>
    </div>

    <!-- 导航按钮 -->
    <div class="navigation-buttons d-flex justify-content-between">
        <div class="d-flex gap-2">
            <button class="btn btn-outline-secondary">上一题</button>
            <button class="btn btn-outline-secondary">下一题</button>
        </div>
        <a href="math-real-explanation.html" class="btn btn-primary">
            <i class="bi bi-journal-text"></i>
            答案解析
        </a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 选项点击事件
        document.querySelectorAll('.option-item').forEach(item => {
            item.addEventListener('click', () => {
                document.querySelectorAll('.option-item').forEach(opt => {
                    opt.classList.remove('selected');
                });
                item.classList.add('selected');
            });
        });

        // 获取年份参数并更新下拉菜单
        const urlParams = new URLSearchParams(window.location.search);
        const year = urlParams.get('year') || '2024';
        document.querySelector('.dropdown-toggle').textContent = `${year}年`;
        
        // 更新当前选中的年份
        document.querySelectorAll('.dropdown-item').forEach(item => {
            if (item.textContent === `${year}年`) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });
    </script>
</body>
</html>
